<template>
  <div>
    <section class="title-bar">
      <el-row>
        <el-col :span="2">
          <el-button type="primary" v-permission="'/authority/queryTree,/authority/add'"
            @click="addDialogVisible = true" :icon="Plus">新增</el-button>
        </el-col>
      </el-row>
    </section>
    <!-- 表格 -->
    <section>
      <el-table :data="tableData.rows" stripe :border="true" row-key="id" default-expand-all style="width: 100%">
        <el-table-column prop="id" label="系统编号">
        </el-table-column>
        <el-table-column label="类型">
          <template v-slot:default="scope">
            <span v-if="scope.row.type === 0">路由组件</span>
            <span v-else>按钮</span>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="前端路由路径">
        </el-table-column>
        <el-table-column label="后端请求" width="200px">
          <template v-slot:default="scope">
            <div v-if="scope.row.relateBackUriList && scope.row.relateBackUriList.length > 0"
              v-for="backUri in scope.row.relateBackUriList" :key="backUri">
              <el-tag type="primary">{{ backUri }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="componentPath" label="组件相对位置">
        </el-table-column>
        <el-table-column label="是否菜单">
          <template v-slot:default="scope">
            <span v-if="scope.row.showInMenu === 0">否</span>
            <span v-else>是</span>
          </template>
        </el-table-column>
        <el-table-column prop="authorityName" label="权限名称">
        </el-table-column>
        <el-table-column label="图标">
          <template v-slot:default="scope">
            <el-icon v-if="scope.row.icon">
              <component :is="scope.row.icon"></component>
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column prop="orderNo" label="排序">
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template v-slot:default="scope">
            <el-button v-permission="'/authority/queryTree,/authority/queryById,/authority/modifyById'" type="primary"
              :icon="Edit" @click="openUpdateDia(scope.row.id)">编辑
            </el-button>
            <el-button v-permission="'/authority/deleteById'" type="danger" :icon="Delete"
              @click="deleteById(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <!-- 新增权限对话框 -->
    <AddAuthority :addDialogVisible="addDialogVisible" @closeDialog="addDialogVisible = false"
      @addSuccess="handleAddSuccess"></AddAuthority>

    <UpdateAuthority :updateDialogVisible="updateDialogVisible" @closeDialog="updateDialogVisible = false"
      @updateSuccess="handleUpdateSuccess" :idToUpdate="idToUpdate"></UpdateAuthority>
  </div>
</template>
<script setup name='AuthorityManage' lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import { Plus, Edit, Delete } from '@element-plus/icons-vue';
import AddAuthority from '@/views/authority/AddAuthority.vue';
import UpdateAuthority from '@/views/authority/UpdateAuthority.vue';
import { queryTableTreeApi, deleteByIdApi } from '@/api/authorityApi';
import { ElMessage, ElMessageBox } from 'element-plus';
// 控制新增对话框是否显示
let addDialogVisible = ref(false)
let updateDialogVisible = ref(false)
let idToUpdate = ref('')
// 表格数据
let tableData = reactive({
  rows: []
})

// 打开修改对话框
function openUpdateDia(id: string) {
  idToUpdate.value = id
  updateDialogVisible.value = true
}
// function deleteById(id: string) {
//   ElMessageBox.confirm("确认要删除吗?", "提示", {
//     app: undefined, components: undefined, config: undefined, directives: undefined, mixins: [], provides: undefined,
//     confirmButtonText: '确定',
//     cancelButtonText: '取消',
//     type: 'warning'
//   }).then(() => {
//     deleteByIdApi(id)
//       .then(result => {
//         ElMessage({ type: "success", message: result.data })
//         loadTable()
//       })
//   })
// }
function deleteById(id: string) {
  ElMessageBox.confirm("确认要删除吗?", "提示", {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteByIdApi(id)
        .then(result => {
          ElMessage({ type: "success", message: result.data });
          loadTable();
        })
        .catch(error => {
          ElMessage.error("删除失败: " + error.message);
        });
  }).catch(() => {
    ElMessage.info("已取消删除");
  });
}

function loadTable() {
  queryTableTreeApi().then(result => {
    tableData.rows = result.data
  })
}
function handleAddSuccess() {
  addDialogVisible.value = false
  // 加载表格
  loadTable()
}
// 处理更新成功的事件
function handleUpdateSuccess() {
  updateDialogVisible.value = false
  loadTable()
}
onMounted(() => {
  loadTable()
})
</script>
<style scoped>
.el-tag {
  margin: 3px;
}
</style>